<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="120px">
        <el-col :span="12">
          <el-form-item label="活动名称" prop="activityName">
            <el-input
              v-model.trim="formData.activityName"
              :disabled="disabled"
              placeholder="请输入活动名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="customerName">
            <el-input
              v-model.trim="formData.customerName"
              :disabled="disabled"
              placeholder="请输入客户名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="customerPhone">
            <el-input
              v-model.trim="formData.customerPhone"
              :disabled="disabled"
              placeholder="请输入联系电话"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用状态" prop="status">
            <el-select
              v-model.number="formData.status"
              :disabled="disabled"
              placeholder="请选择使用状态"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.order_status"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动类型" prop="activityType">
            <el-select
              v-model.number="formData.activityType"
              :disabled="disabled"
              placeholder="请选择活动类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.activity_type"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 1">
          <el-form-item label="购买数量" prop="number">
            <el-input
              v-model.trim="formData.number"
              :disabled="disabled"
              placeholder="请输入购买数量"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 1">
          <el-form-item label="下单时间" prop="createOrderTime">
            <el-date-picker
              v-model.trim="formData.createOrderTime"
              :disabled="disabled"
              type="datetime"
              placeholder="请选择下单时间"
              :style="{ width: '100%' }"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 1">
          <el-form-item label="总金额" prop="amount">
            <el-input
              v-model.trim="formData.amount"
              :disabled="disabled"
              placeholder="请输入总金额"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 1">
          <el-form-item label="商品" prop="prize">
            <el-input
              v-model.trim="formData.prize"
              :disabled="disabled"
              placeholder="请输入商品"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
       <!-- <el-col :span="12">
          <el-form-item
            label="定金"
            prop="downPayment"
            v-if="formData.activityType == 1"
          >
            <el-input
              v-model.trim="formData.downPayment"
              :disabled="disabled"
              placeholder="请输入定金"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="适用门店" prop="storeName">
            <el-input
              v-model.trim="formData.storeName"
              :disabled="disabled"
              placeholder="请输入适用门店"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动开始时间" prop="activityStartTime">
            <el-date-picker
              v-model.trim="formData.activityStartTime"
              :disabled="disabled"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择活动开始时间"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动结束时间" prop="activityEndTime">
            <el-date-picker
              v-model.trim="formData.activityEndTime"
              :disabled="disabled"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择活动结束时间"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 1&&formData.payStatus==2">
          <el-form-item label="支付时间" prop="payTime">
            <el-date-picker
              v-model.trim="formData.payTime"
              :disabled="disabled"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择支付时间"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 1">
          <el-form-item label="支付状态" prop="payStatus">
            <el-radio-group v-model="formData.payStatus">
              <el-radio
                v-for="item in dict.type.order_payStatus"
                :key="item.value"
                :disabled="disabled"
                :label="parseInt(item.value)"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 1&&formData.payStatus==2">
          <el-form-item label="支付方式" prop="payWay">
            <el-select
              v-model.number="formData.payWay"
              :disabled="disabled"
              placeholder="请选择支付方式"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.order_payWay"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 3">
          <el-form-item label="组团开始时间" prop="groupStartTime">
            <el-date-picker
              v-model.trim="formData.groupStartTime"
              :disabled="disabled"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择组团开始时间"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 3">
          <el-form-item label="组团结束时间" prop="groupEndTime">
            <el-date-picker
              v-model.trim="formData.groupEndTime"
              :disabled="disabled"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择组团结束时间"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 3">
          <el-form-item label="组团人数" prop="groupPeople">
            <el-input
              v-model.trim="formData.groupPeople"
              :disabled="disabled"
              placeholder="请输入组团人数"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="发放时间" prop="grantTime">
            <el-date-picker
              v-model="formData.grantTime"
              :disabled="disabled"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择发放时间"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col> -->
        <el-col :span="12" v-if="formData.activityType == 2">
          <el-form-item label="报名客户" prop="customersBooking">
            <el-input
              v-model.trim="formData.customersBooking"
              :disabled="disabled"
              placeholder="请输入报名客户"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.activityType == 2">
          <el-form-item label="报名客户手机号" prop="customersBookingPhone">
            <el-input
              v-model.trim="formData.customersBookingPhone"
              :disabled="disabled"
              placeholder="请输入报名客户"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
       <!-- <el-col :span="12">
          <el-form-item label="创建人" prop="createBy">
            <el-input
              v-model.trim="formData.createBy"
              :disabled="disabled"
              placeholder="请输入创建人"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col> -->
       <!-- <el-col :span="12">
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model.trim="formData.createTime"
              :disabled="disabled"
              type="datetime"
              placeholder="请选择创建时间"
              :style="{ width: '100%' }"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="修改人" prop="updateBy">
            <el-input
              v-model.trim="formData.updateBy"
              :disabled="disabled"
              placeholder="请输入修改人"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="修改时间" prop="updateTime">
            <el-date-picker
              v-model.trim="formData.updateTime"
              :disabled="disabled"
              type="datetime"
              placeholder="请选择修改时间"
              :style="{ width: '100%' }"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="说明" prop="orderExplain">
            <el-input
              v-model.trim="formData.orderExplain"
              :disabled="disabled"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              placeholder="请输入说明"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
import { getActivityById } from '@/api/order/activity'
export default {
  name: 'activity_detail',
  dicts: ['order_status', 'activity_type', 'order_payStatus', 'order_payWay'],
  data() {
    return {
      disabled: true,
      formData: {
        activityName: '',
        customerName: null,
        customerPhone: '',
        status: null,
        activityType: null,
        number: null,
        createOrderTime: '',
        amount: null,
        prize: null,
        downPayment: null,
        storeName: '',
        activityStartTime: '',
        activityEndTime: '',
        payTime: null,
        payStatus: null,
        payWay: null,
        groupStartTime: '',
        groupEndTime: '',
        groupPeople: null,
        grantTime: '',
        orderExplain: '',
        customersBooking: '',
        customersBookingPhone: '',
        createTime: '',
        createBy: '',
        updateTime: '',
        updateBy: '',
      },
    }
  },
  filters: {
    typeFilter(val, type) {
      if (val === null) return null
      let data = type.filter((item) => {
        return val == item.value
      })
      if (data.length) {
        return data[0].label
      } else {
        return val
      }
    },
  },
  created() {
    this.getActivityById()
  },
  methods: {
    getActivityById() {
      getActivityById({ id: this.$route.params.id }).then((res) => {
        this.formData = res.data;
		
		let arr=[];
		for(let item of res.data.serviceInfoList){
			arr.push(item.shoppingServiceName)
		}
		this.formData.prize=arr.join(",");
      })
    },
    goBack() {
      this.$router.go(-1) // 返回
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      )
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      )
    },
  },
}
</script>